<!doctype html>  
<!--[if IE 6 ]><html lang="en-us" class="ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en-us" class="ie8"> <![endif]-->
<!--[if (gt IE 7)|!(IE)]><!-->
<html lang="en-us"><!--<![endif]-->
<head>
	<meta charset="utf-8">
	
	<title>Groutek HTML Template</title>
	
	<meta name="description" content="Thanks for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my ThemeForest user page contact form. Thanks so much!">
	<meta name="author" content="Mad_Dog">
	<meta name="copyright" content="Mad_Dog">
	<meta name="generator" content="Documenter v1.6 http://rxa.li/documenter">
	<meta name="date" content="2012-02-08T14:01:31+01:00">
	<link rel="stylesheet" id="theme_font_css"  href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&#038;subset=latin,latin-ext" type="text/css" media="all" />
	<link rel="stylesheet" href="css/documenter_style.css" media="all">
	
	
	<script src="js/jquery.1.6.4.js"></script>
	
	<script src="js/jquery.scrollTo-1.4.2-min.js"></script>
	<script src="js/jquery.easing.js"></script>
	
	
	<script>document.createElement('section');var duration=450,easing='easeOutExpo';</script>
	<script src="js/script.js"></script>
	
	<style>
		html{background-color:#FFFFFF;color:#383838;}
		::-moz-selection{background:#444444;color:#DDDDDD;}
		::selection{background:#444444;color:#DDDDDD;}
		#documenter_sidebar #documenter_logo{background-image:url();}
		a{color:#21759B;}
		hr{border-top:1px solid #EBEBEB;border-bottom:1px solid #FFFFFF;}
		#documenter_copyright{display:block !important;visibility:visible !important;}
		
	</style>
	
</head>
<body>
	<div id="documenter_sidebar">
		<a href="#documenter_cover" id="documenter_logo"></a>
		<ol id="documenter_nav">
			<li><a class="current" href="#documenter_cover">Start</a></li>
            <li><a href="#logo">How to change the logo?</a></li>
			<li><a href="#menu">How to change Menu?</a></li>
            <li><a href="#header">How to switch Headers?</a></li>
            <li><a href="#tagline_text">How to change Header Tagline Text?</a></li>
			<li><a href="#portfolio">How to add/manage Portfolio?</a></li>
            <li><a href="#gallery">How to add/manage Gallery?</a></li>      
             <li><a href="#shortcodes">How to use Shortcodes?</a></li>
            <li><a href="#color">How to change the color scheme?</a></li>
			<li><a href="#contact">How to setup Contact Form?</a></li>
            <li><a href="#flickr">How to setup Flickr?</a></li>
            <li><a href="#twitter">How to setup Twitter?</a></li>
			<li><a href="#source">Source files included</a></li>
		</ol>
	</div>
<div id="documenter_content">
  <section id="documenter_cover">
	  <h1>Groutek HTML Template</h1>
	  <hr><ul><li>By: Mad_Dog</li><li><a href="http://themeforest.net/user/mad_dog">themeforest.net/user/mad_dog</a></li><li></li>
	    <li>Support Forum: <a href="http://forums.gt3themes.com">http://forums.gt3themes.com</a></li>
	  </ul>
	  <p>Thanks for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to submit your request to my support forum. Also you can find a lot of useful information right there. Thanks so much!</p></section>
      
       <section id="logo">
<h3>How to change the logo?</h3>
	<p>You can do that very easily, simply replace the current logo image with your own one.</p>
	<p> The current logo image is located in <strong>img/logo.png</strong> folder. The required size is 105 × 35(px).</p>
	<p>Taking into consideration the fact that this theme is retina ready, you have to upload the second logo in 2 sizes bigger to look great on tablet and mobile devices to <strong>img/retina/logo.png</strong> folder. For example, if your site logo is 176x33, the retina version will be 210x70.</p>
  </section>
      
<section id="menu">
	<h3>How to change Menu?</h3><hr class="notop">
<p>To change the menu section, please open<strong> index.html </strong>file and find line: 93 <strong>&lt;ul class="menu"&gt;</strong><br>
Under the line you will find all required menu items. You can easily change the menu names, add/edit or delete them from the code.</p>
<p>
&lt;ul class="menu"><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class="current-menu-parent menu-item-has-children">&lt;a href="#">Home&lt;/a><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="sub-nav"><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class="sub-menu"><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class="current-menu-item">&lt;a href="index.html">Home Type1&lt;/a>&lt;/li><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li>&lt;a href="home_type2.html">Home Type2&lt;/a>&lt;/li><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li>&lt;a href="home_type3.html">Home Type3&lt;/a>&lt;/li> <br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li>&lt;a href="home_type4.html">Home Type4&lt;/a>&lt;/li> <br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul> <br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div>	<br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li><br>

</p>



<section id="header">
	<h3>How to switch Header types?</h3><hr class="notop">
<p>This template has 2 different header types, you can check their look at the demo page.</p>
<p>Let's take a look how to do that. Please open <strong>index.html</strong> or any other file to find the line with the code <strong>&lt;header id=&quot;main_header type1&quot;&gt;</strong></p>
<p>Simply change the type number 1-2 and save the changes, you will see that the type of the header changed on index.html page.</p>
<p>Please note if you will not make changes your header will be the default type.</p>
</section>

<section id="tagline_text">
<h3>How to change Header Tagline Text?</h3>
<p>This template has a tagline section with phone number, mail address, flags etc.
<p>Let's take a look how to change the details. Please open <strong>index.html</strong> or other files to find the lines 21-88 <strong>&lt;div class="tagline"&gt;</strong></p>

<p>The flags images are located in img/imgs/ folders.</p>
</section>
    
<section id="portfolio">
	<h3>How to add/manage Portfolio?</h3><hr class="notop">
<p>There are 5 portfolio pages come with this template:</p>
<ul>
<li>1,2,3 Column Portfolio, 3 Columns Masonry and Wide Portfolio.</li>
</ul>
<p>Let's take a look at Wide Portfolio, please open <strong>portfolio_wide.html</strong> file and go to line #232:</p>
<p>

&lt;div class="sorting_block image-grid featured_items photo_gallery" id="list"><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="branding element"><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="item"><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="item_wrapper"><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="img_block wrapped_img"><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src="img/portfolio/wall/1.jpg" alt=""><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class="block_fade">&lt;/span><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="post_hover_info"><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="featured_items_title"><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h5>Business Card&lt;/h5><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="featured_meta">Print Design&lt;/div><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="img/portfolio/wall/1.jpg" class="photozoom featured_ico_link view_link"><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;i class="icon-expand">&lt;/i>&lt;/a><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class="featured_ico_link view_link" href="portfolio_post_fullwidth.html"><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;i class="icon-link"></i>&lt;/a><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div> <br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div><br>

	
 </p>
<ul>
  <li><strong>&lt;div class="branding element"&gt; </strong>is the name of a category it belongs to.</li>
<li>src=&quot;<strong>img/portfolio/wall/1.jpg</strong>&quot;is the path to an image.</li>
<li><strong>portfolio_post_fullwidth.html</strong>is the path to the portfolio item page.</li>
<li><strong>class=&quot;featured_items_title&quot;</strong>is the title of the portfolio item.</li>
</ul>
<img src="images/portfolio_wall.png" alt="">
</section>

<section id="gallery">
	<h3>How to add/manage Gallery?</h3><hr class="notop">
    <p>As you can see this template comes with gallery page. </p>
    <p>Let's try to manage the gallery. Please open<strong> gallery.html</strong> file and find line #218 to review the code below:</p>
<p>
	&lt;li><br>

   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="item"><br>

   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="gallery_item_padding"><br>

   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="gallery_item_wrapper"><br>

   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src="img/gallery/1.jpg" alt="" /><br>

   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class="block_fade">&lt;/span><br>

   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="post_hover_info"><br>

   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="img/gallery/1_zoom.jpg" class="photozoom view_link"><br>

   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;i class="icon-expand">&lt;/i>&lt;/a><br>

   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div><br>

   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div><br>

  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div><br>

   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div><br>

   &lt;/li><br>


 </p>
<p>Every gallery item starts and ends with<strong> &lt;div&gt;&lt;/div&gt;</strong></p>
<ul>
<li>
<strong>&lt;img src=&quot;img/gallery/1.jpg&quot;</strong>: is the path to a thumb image;
</li>
<li>
<strong>&lt;a href="img/gallery/1_zoom.jpg"&gt;</strong>: is the image that opens in the lightbox window;
</li>
<li><strong>Note</strong>, change only details indicated above.</li>
</ul>
<img src="images/gallery.png" alt="">
   
</section>

<section id="shortcodes">
	<h3>How to use Shortcodes ?</h3><hr class="notop">
<p>In case you need to use one of the existing shortcodes on your page you should simply open shortcodes.html page and copy the existing shortcode</p>
<p>For example in <strong>shortcodes.html</strong> you want to copy a Counter. In this case copy the code starting from line 241-362 and then past it in your page where you need and then edit it.</p>
<p>
 &lt;div class="row"> <br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="col-sm-4 module_cont"><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="module_content shortcode_counter with_icon"><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="counter_wrapper"><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="counter_content"> <br> 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="counter_body"><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="counter_icon color_gradient_vert">&lt;img src="img/icons/icon1.png" <br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;class="icon_def" width="80" height="80" alt="" />&lt;img src="img/retina/icons<br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/icon1.png" class="icon_retina" width="80" height="80" alt="" />&lt;/div><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="stat_count_wrapper">	<br>	

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1 class="stat_count" data-count="3541">0&lt;/h1><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h4 class="counter_title">Days of Work&lt;/h4><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div>     <br>      

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="counter_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit,<br>

 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sed do eiusmod tempor incididunt ut labore et.&lt;/div><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="stat_temp">&lt;/div><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div><br>





            </p>
<img src="images/counter.png" alt="">

<p> Simply change the fields with yours, if it is required. That's it.</p>
</section>

<section id="color">
  <h3>How to change the color of the theme?</h3>  
<p>The main theme color styles you can find in .../css/custom.css and ..\css\theme.css.</p>

</section>

 
<section id="contact">
	<h3>Contact Form Setup</h3>
	<p>You can setup your contact form in 2 clicks, please open <strong>mail.php</strong> file and find <strong>test@test.com on line 3</strong>, simply replace to your email address. All the requests will be sent to the adress you indicated. That's all ;)</p>
</section>



<section id="flickr">
	<h3>How to setup Flickr photostream?</h3><hr class="notop">
<p>To show posts from your flickr account you need to insert your account details on the page where the stream is diplaying, simply replace src url to your profile url.</p><p>
<p>
&nbsp;&nbsp; &nbsp;&lt;div class="sidepanel widget_flickr"&gt;<br />

&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h4 class="title"&gt;Photo Stream&lt;/h4&gt;<br />

&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div class="flickr_widget_wrapper"&gt;&lt;script src="http://www.flickr.com/badge_code_v2.gne?count=8&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;user=91205275@N03"&gt;&lt;/script&gt;&lt;/div&gt;	<br />

&nbsp;&nbsp; &nbsp;&lt;/div&gt;<br />
			</p>
			<p> Please indicate items number and user id. The code indicated above is the theme demo example.</p>
</section>

<section id="twitter">
	<h3>How to setup Twitter?</h3><hr class="notop">
<p>The Latest tweets display on the preefooter. Please follow the steps below to activate tweets from your account:</br>
<ul>
<li> open .../twitter/index.php file to add the twitter account details:<br />
 // Your Twitter App Consumer Key<br />
	private $consumer_key = 'YOUR_CONSUMER_KEY';<br />

	// Your Twitter App Consumer Secret<br />
	private $consumer_secret = 'YOUR_CONSUMER_SECRET';<br />

	// Your Twitter App Access Token<br />
	private $user_token = 'YOUR_ACCESS_TOKEN';<br />

	// Your Twitter App Access Token Secret<br />
	private $user_secret = 'YOUR_ACCESS_TOKEN_SECRET';<br />
	</li>
<li> please open .../js/theme.js (line 251), find the line (// Twitter Setup) to remove the comment codes /* ..... */.<br /> 
jQuery('.tweet_module').tweet({<br />
			modpath: 'twitter/',<br />
			count: 2,<br />
			username : 'yourusername'<br />
		});<br />
		</li>
<ul>


</section>

<section id="source">
	<h3>Source files included</h3><hr class="notop">
<p>Frame  comes with<strong> 35 PSD and 47 HTML</strong> files. Some PSD files can include different pages inside, and can have hidden layers. Please note that the images are not included in the package.</p>
<p>All <strong>.js</strong> files are located in the<strong> /js/</strong> folder.
</p>
</section>

</div>
</body>
</html>